<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">


	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define>
	<ui:define name="content">
		<h:form id="createTRForm">
			<h:panelGrid style="width: 100%; ">
				<h:outputText value="Create Travel Request" styleClass="outputTextTitle" style="margin-left: 2px;"/>
				<h:panelGrid columns="3">
					<h:outputText
						value="Travel Request Type: "
						styleClass="outputTextSubTitle" />
					<p:menuButton id="travelTypeSelectionButtons" value="#{createTravelRequestBean.travelRequest.travelType}" style="width: 300px;">
						<p:menuitem value="DOMESTIC" actionListener="#{createTravelRequestBean.travelTypeChangeListener}" update="@form" style="width: 300px;"/>
						<p:menuitem value="OVERSEAS" actionListener="#{createTravelRequestBean.travelTypeChangeListener}" update="@form" />
						<p:menuitem value="BOTH DOMESTIC AND OVERSEAS" actionListener="#{createTravelRequestBean.travelTypeChangeListener}" update="@form" />
					</p:menuButton>					
				</h:panelGrid>
				<h:panelGrid style="width: 100%;">
					<h:panelGrid columns="9" 
						columnClasses="employeeDetail6GridsCell1, gridCellMiddleLeftAligned, employeeDetail6GridsCell2, employeeDetail6GridsCell1, gridCellMiddleLeftAligned, employeeDetail6GridsCell2, employeeDetail6GridsCell1, gridCellMiddleLeftAligned"
						style="width: 100%; background-color: #FFE4C4; border: 1px solid #F5AD66;">
						<h:outputLabel value="Travel Request Code" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createTravelRequestBean.travelRequest.travelRequestCode}" styleClass="wamOutputLebel" style="font-weight: bold; color: #7892B7"/>

						<h:outputLabel value="#{msg['employeename.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createTravelRequestBean.travelRequest.employee.firstName} #{createTravelRequestBean.travelRequest.employee.lastName}"
							styleClass="wamOutputLebel" />

						<h:outputLabel value="Employee Code" />
						<h:outputLabel value=":" />						
						<h:outputLabel value="#{createTravelRequestBean.travelRequest.employee.employeeCode}"
							styleClass="wamOutputLebel" />

						<h:outputLabel value="#{msg['contactnumber.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel
							value="#{createTravelRequestBean.travelRequest.employee.telephone}"
							styleClass="wamOutputLebel" />

						<h:outputLabel value="#{msg['approvalby.label']}" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createTravelRequestBean.travelRequest.approver.firstName} #{createTravelRequestBean.travelRequest.approver.lastName}" styleClass="wamOutputLebel" />

						<h:outputLabel value="Date" />
						<h:outputLabel value=":" />
						<h:outputLabel value="#{createTravelRequestBean.travelRequest.requestDate}"
							styleClass="wamOutputLebel">
							<f:convertDateTime pattern="dd-MMM-yyyy" />
						</h:outputLabel>
					</h:panelGrid>

					<p:spacer />

					<h:outputLabel value="Travel Details"
						styleClass="outputTextSubTitle" />

					<h:panelGrid columns="9" rendered="#{createTravelRequestBean.travelRequest.travelType eq 'DOMESTIC'}" 
						columnClasses="grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned "
						style="width: 100%">
						<h:outputLabel value="#{msg['modeoftransport.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 159px;" value="#{createTravelRequestBean.travelRequest.travelMode}">
							<f:selectItems value="#{createTravelRequestBean.travelModesMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['natureofwork.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 159px" value="#{createTravelRequestBean.travelRequest.natureOfWork}">
							<f:selectItems value="#{createTravelRequestBean.natureOfWorksMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask value="#{createTravelRequestBean.travelRequest.emergencyContact}" mask="(999) 999-9999"/>  
						

						<h:outputLabel value="Start Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{createTravelRequestBean.travelRequest.periodFrom}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="From City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFrom_DO}" />

						<h:outputLabel value="From Country" />
						<h:outputLabel value=":" />
						<h:outputText value="#{createTravelRequestBean.travelRequest.travelFromCountry_DO}" />

						<h:outputLabel value="Return Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{createTravelRequestBean.travelRequest.periodTo}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="To City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelTo_DO}" />

						<h:outputLabel value="To Country" />
						<h:outputLabel value=":" />
						<h:outputText value="#{createTravelRequestBean.travelRequest.travelToCountry_DO}" />

						<h:outputLabel value="#{msg['clientname.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.client}" />

						<h:outputLabel value="#{msg['clientlocation.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.clientLocation}" />

						<p:spacer />
						<p:spacer />
						<p:spacer />
						
						<h:outputLabel value="#{msg['advancerequired.label']} (INR)" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredDOINR" value="#{createTravelRequestBean.advancePaymentINR}" mask="99999.99" >
							<p:watermark for="advanceRequiredDOINR" value="00000.00" />
						</p:inputMask>  
							
 					</h:panelGrid> 
 					
 					<!-- Overseas -->
					<h:panelGrid columns="9" rendered="#{createTravelRequestBean.travelRequest.travelType eq 'OVERSEAS'}"
						columnClasses="grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid96pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, gridCellMiddleLeftAligned "
						style="width: 100%">
						<h:outputLabel value="#{msg['modeoftransport.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 159px;" value="#{createTravelRequestBean.travelRequest.travelMode}">
							<f:selectItems value="#{createTravelRequestBean.travelModesMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['natureofwork.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 159px" value="#{createTravelRequestBean.travelRequest.natureOfWork}">
							<f:selectItems value="#{createTravelRequestBean.natureOfWorksMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask value="#{createTravelRequestBean.travelRequest.emergencyContact}" mask="(999) 999-9999"/>  
						

						<h:outputLabel value="Start Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{createTravelRequestBean.travelRequest.periodFrom}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="From City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFrom_OS}" />

						<h:outputLabel value="From Country" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFromCountry_OS}" />

						<h:outputLabel value="Return Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{createTravelRequestBean.travelRequest.periodTo}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="To City" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelTo_OS}" />

						<h:outputLabel value="To Country" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelToCountry_OS}" />

						<h:outputLabel value="#{msg['clientname.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.client}" />

						<h:outputLabel value="#{msg['clientlocation.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.clientLocation}" />

						<p:spacer />
						<p:spacer />
						<p:spacer />
						
						<h:outputLabel value="#{msg['advancerequired.label']} (INR)" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredOSINR" value="#{createTravelRequestBean.advancePaymentINR}" mask="99999.99" >
							<p:watermark for="advanceRequiredOSINR" value="00000.00" />
						</p:inputMask>  
						
						<h:outputLabel value="#{msg['advancerequired.label']} (USD)"  />
						<h:outputLabel value=":"  />
						<p:inputMask id="advanceRequiredOSUSD" value="#{createTravelRequestBean.advancePaymentUSD}" mask="99999.99"  >
							<p:watermark for="advanceRequiredOSUSD" value="00000.00" />
						</p:inputMask>						
 					</h:panelGrid> 
 					
 					<!-- BOTH -->
					<h:panelGrid columns="6" style="width: 100% " rendered="#{createTravelRequestBean.travelRequest.travelType eq 'BOTH DOMESTIC AND OVERSEAS'}"
						columnClasses="grid126pxCellMiddleLeftAligned, gridCellMiddleLeftAligned, grid168pxCellMiddleLeftAligned, grid126pxCellMiddleLeftAligned, gridCellMiddleLeftAligned">
						
						<h:outputLabel value="#{msg['modeoftransport.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 159px" value="#{createTravelRequestBean.travelRequest.travelMode}">
							<f:selectItems value="#{createTravelRequestBean.travelModesMap}" />
						</p:selectOneMenu>

						<p:spacer />
						<p:spacer />
						<p:spacer />

						<h:outputLabel value="#{msg['natureofwork.label']}" />
						<h:outputLabel value=":" />
						<p:selectOneMenu style="width: 159px" value="#{createTravelRequestBean.travelRequest.natureOfWork}" >
							<f:selectItems value="#{createTravelRequestBean.natureOfWorksMap}" />
						</p:selectOneMenu>

						<h:outputLabel value="#{msg['emergenceycontactnum.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask value="#{createTravelRequestBean.travelRequest.emergencyContact}" mask="(999) 999-9999" >
							
						</p:inputMask>

						<h:outputLabel value="Start Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{createTravelRequestBean.travelRequest.periodFrom}" pattern="dd-MMM-yyyy" />

						<h:outputLabel value="Return Date" />
						<h:outputLabel value=":" />
						<p:calendar value="#{createTravelRequestBean.travelRequest.periodTo}" pattern="dd-MMM-yyyy" styleClass="inputText"/>

						<h:outputLabel value="From City (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFrom_DO}" />

						<h:outputLabel value="From Country (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFromCountry_DO}" styleClass="inputText"/>

						<h:outputLabel value="To City (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelTo_DO}" styleClass="inputText"/>

						<h:outputLabel value="To Country (Domestic)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelToCountry_DO}" styleClass="inputText"/>

						<h:outputLabel value="From City (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFrom_OS}" styleClass="inputText" />

						<h:outputLabel value="From Country (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelFromCountry_OS}" styleClass="inputText" />

						<h:outputLabel value="To City (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelTo_OS}" styleClass="inputText" />

						<h:outputLabel value="To Country (Overseas)" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.travelToCountry_OS}" />

						<h:outputLabel value="#{msg['clientname.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.client}" />

						<h:outputLabel value="#{msg['clientlocation.label']}" />
						<h:outputLabel value=":" />
						<p:inputText value="#{createTravelRequestBean.travelRequest.clientLocation}" />

						<h:outputLabel value="#{msg['advancerequired.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredINRDNO" value="#{createTravelRequestBean.advancePaymentINR}" mask="99999.99" >
							<p:watermark for="advanceRequiredINRDNO" value="00000.00" />
						</p:inputMask>
						
							
						<h:outputLabel value="#{msg['advancerequired.label']}" />
						<h:outputLabel value=":" />
						<p:inputMask id="advanceRequiredUSDDNO" value="#{createTravelRequestBean.advancePaymentUSD}" mask="99999.99">
							<p:watermark for="advanceRequiredUSDDNO" value="00000.00" />
						</p:inputMask>
						
					</h:panelGrid>
					
					<p:spacer />
					<h:outputLabel value="Logistics" styleClass="outputTextSubTitle" 
							 />
					<p:dataTable style="width: 100%; " 
									value="#{createTravelRequestBean.logistics}" var="row">
						<p:column style="width: 200px;">
							<h:outputLabel value="#{row.logistics.displayName}" />
						</p:column>
						<p:column headerText="Cost born by" style="width: 159px;">
							<p:selectOneMenu id="reimbyrsedByMenu" styleClass="selectOneMenu168pxFixedWidth" value="#{row.byWhom}">
								<f:selectItem itemLabel="" itemValue=""/>
								<f:selectItems value="#{createTravelRequestBean.reimbursedByMap}" />
							</p:selectOneMenu>
							<p:watermark for="reimbyrsedByMenu" value="Cost born by" />
						</p:column>
						<p:column headerText="Remarks">
							<p:inputTextarea id="remarks" cols="30" rows="1" value="#{row.remarks}" style="width: 96%" />
							<p:watermark for="remarks" value="Remarks" />
						</p:column>
					</p:dataTable>

				</h:panelGrid>
				<h:panelGroup style="float:right;">
					<p:commandButton value="Submit Travel Request" actionListener="#{createTravelRequestBean.submitRequest}" process="@form" update="@form" ajax="false"/>						
				</h:panelGroup>
			</h:panelGrid>
			<p:growl id="growl" />
		</h:form>
	</ui:define>
</ui:composition>

